<script setup>
import { ref, computed } from "vue"

const user = ref({
    userName: '',
    age: 0,
    sex: ''
})

const results = computed(() => {
    return `
    <p>用户名：${user.value.userName}</p>
    <p>年龄：${user.value.age}岁</p>
    <p>性别：${user.value.sex}</p>
   `
})

</script>

<template>
    <label>用户名：</label>
    <input v-model="user.userName" placeholder="用户名" />
    <br>

    <label>年龄：</label>
    <input v-model="user.age" placeholder="年龄" />
    <br>

    <label>性别：</label>
    <input type="radio" name="sex" value="男" v-model="user.sex" />男
    <input type="radio" name="sex" value="女" v-model="user.sex" />女

    <div>
        <h3>用户信息摘要：</h3>

        <div v-html="results"></div>
    </div>
</template>